<template>
	<div id="home">		
		<div id="map" class="map"> 
		</div>		
		<div class="left_content">
			<!-- 数据概览 -->
			<PanelWrap class="sjgl_panel">
				<template #mainContent>
					<div class="sjgl_content">
						<div class="sjgl_statis">
							<div class="ss_item jnzdyl">
								<span class="label1">江南最低压力</span>	
								<span class="label2"><span class="num">27,483</span><span>只</span></span>
							</div>
							<div class="ss_item jbzdyl">
								<span class="label1">江北最低压力</span>
								<span class="label2"><span class="num">85,693</span>&nbsp;户</span>
							</div>
							<div class="ss_item dybg">
								<span class="label1">当月爆管</span>
								<span class="label2"><span class="num">44,256</span>&nbsp;km</span>
							</div>
							<div class="ss_item drbj">
								<span class="label1">当日报警</span>
								<span class="label2"><span class="num">44,589</span>&nbsp;k㎡</span>
							</div>
						</div>
						<!-- <div class="line"></div> -->
						<!-- <div class="sjgl_chart">
							<div class="tab_group">
								<span :class="[showBallName == 'jnsc' ? 'tab_label_active' : '','tab_label']" @click="showBall('jnsc')">江南水厂</span>
								<span :class="[showBallName == 'jbsc' ? 'tab_label_active' : '','tab_label']" @click="showBall('jbsc')">江北水厂</span>
							</div>
							<div class="content" v-show="showBallName == 'jnsc'">
								<div id="ball_wrap1" class="ball_wrap">
									<div id="liquid1"></div>
								</div>
								<div class="statics">
									<span class="item">设计规模：<span class="num">15,000</span>m³</span>
									<span class="item">日均供水：<span class="num">8,589</span>m³</span>
									<span class="item">历史最高：<span class="num">10,080</span>m³</span>
								</div>
							</div>
							<div class="content" v-show="showBallName == 'jbsc'">
								<div id="ball_wrap2" class="ball_wrap">
									<div id="liquid2"></div>
								</div>
								<div class="statics">
									<span class="item">设计规模：<span class="num">15,000</span>m³</span>
									<span class="item">日均供水：<span class="num">8,589</span>m³</span>
									<span class="item">历史最高：<span class="num">10,080</span>m³</span>
								</div>
							</div>
						</div> -->
					</div>
				</template>
			</PanelWrap>
			<!-- 出厂压力 -->
			<PanelWrap class="ccyl_panel">
				<template #mainContent>
					<div class="chart_wrap">
						<div id="chart_EFP_jb"></div>
						<div id="chart_EFP_jn"></div>
					</div>
					<div class="line"></div>
					<div class="charts_press">
						<div class="title">
							<span class="text">24小时压力变化曲线</span>
							<span class="icon"></span>	
						</div>
						<div id="chart_ccylbh"></div>
					</div>
				</template>
			</PanelWrap>
			<PanelWrap class="zdjc_panel">
				<template #top>
					<RefreshPanel :timeVal="curTime" refreshable="true" setable="true" @reGetData="initChart_zdjc(1)"></RefreshPanel>
				</template>
				<template #mainContent>
					<div id="chart_zdjc"></div>
				</template>				
			</PanelWrap>
			<!-- <PanelWrap class="ycylsj_panel">
				<template v-slot:mainContent>
					<div class="table_ycylsj my_table">
						<div class="list_title">
							<span class="list_item title_type">编号</span>
							<span class="list_item title_level" style="flex:1;">位置</span>
							<span class="list_item title_status" style="flex:1;">实时压力</span>
						</div>
						<ul class="warning_list">
							<li v-for="(item,index) in ycylsjList" :key="index" class="list_row">
								<span class="list_item">{{item.id}}</span>
								<span class="list_item" style="flex:1;">{{item.pressureNode.street}}</span>
								<span class="list_item" style="flex:1;">{{item.value}}</span>
							</li>
						</ul>
					</div>
				</template>					
			</PanelWrap>			 -->
		</div>
		<div class="bar_right" :key="timer">
			<div class="bar_wrap" v-for="group in mapBarList" :key="group.index">
				<div class="bar_item" v-for="item in group" :key="item.index">
					<div class="left_label">
						<img :src="item.img" alt="" class="bar_icon">
						<span class="bar_label">{{item.label}}</span>
					</div>
					<div v-if="item.hasSwitch" class="right_opt">
						<span>{{item.num}}</span>
						<el-switch
							v-model="item.switch"
							@change="showswitch(item.switch,item.label)"
							active-value="true"
							inactive-value="false"
							active-color="rgba(6, 216, 90, 1)"
							inactive-color="rgba(255, 255, 255, 0.2)">
						</el-switch>
					</div>
				</div>
			</div>			
		</div>
		<div class="right_content">
			<PanelWrap class="sbtj_panel">
				<template #top>
					<RefreshPanel :timeVal="curTime" refreshable="true" @reGetData="initChart_zdjc(1)"></RefreshPanel>
				</template>
				<template #mainContent>					
					<div id="chart_sbtj"></div>
					<ul class="statis_list">
						<li class="sta_li normal">
							<span class="icon">
								<!-- <img alt=""> -->
							</span>
							<span class="text">正常</span>
							<span class="num">170</span>
						</li>
						<li class="sta_li outline">
							<span class="icon">
								<!-- <img alt=""> -->
							</span>
							<span class="text">离线</span>
							<span class="num">10</span>
						</li>
						<li class="sta_li warning">
							<span class="icon">
								<!-- <img alt=""> -->
							</span>
							<span class="text">报警</span>
							<span class="num">30</span>
						</li>
						<!-- <li class="sta_li notwork">
							<span class="icon">
							</span>
							<span class="text">维修</span>
							<span class="num">5</span>
						</li> -->
					</ul>
				</template>
			</PanelWrap>
			<PanelWrap class="ylfbtj_panel">
				<template #top>
					<RefreshPanel :timeVal="curTime_ylfbtj" refreshable="true" @reGetData="initChart_ylfbtj()"></RefreshPanel>
				</template>
				<template #mainContent>
					<div id="chart_ylfbtj"></div>
				</template>
			</PanelWrap>
			<!-- 爆管记录 -->
			<PanelWrap class="bgjl_panel">
				<template #top>
					<RefreshPanel :timeVal="curTime" refreshable="true" @reGetData="initChart_zdjc(1)"></RefreshPanel>
				</template>
				<template #mainContent>
					<div id="chart_bgjl"></div>
				</template>
			</PanelWrap>
			<!-- 报警列表 -->
			<PanelWrap class="bjlb_panel">
				<template #top>
					<RefreshPanel :timeVal="curTime" refreshable="true" @reGetData="initChart_zdjc(1)"></RefreshPanel>
				</template>
				<template #mainContent>
					<div class="my_table">
						<div class="list_title">
							<span class="title_item title_type" style="width:120px;overflow: hidden;">时间</span>
							<span class="title_item title_level" style="flex:none;">类型</span>
							<span class="title_item title_status" style="width:120px;">地址</span>
							<span class="title_item title_dt">状态</span>
							<span class="title_item title_dt">级别</span>
						</div>
						<ul class="warning_list">
							<li v-for="(item,index) in bjlbist" :key="index" :class="[item.level == '高' ? 'level1' : item.level == '中' ? 'level2' : 'level3','list_row']">
								<span class="td_item d_time" style="width:120px;overflow: hidden;"><span class="icon"></span>{{item.date}}</span>
								<span class="td_item d_type">{{item.type}}</span>
								<span class="td_item d_address" style="width:120px;">{{item.address}}</span>
								<span class="td_item d_status"><span class="icon"></span>{{item.status}}</span>
								<span class="td_item d_level">{{item.level}}<span class="icon"></span></span>
							</li>
						</ul>
					</div>		
				</template>		
			</PanelWrap>
		</div>
		<!-- <div class="top_infoshow top_infoshow_yl">
			<span class="info_item cur_jnzdyl">
				<img src="../assets/image/yl.png" alt="">
				<div class="item_text">
					<span class="label">江南最低压力</span>
					<span><span class="num">0.6</span>(Mpa)</span>
				</div>
			</span>
			<span class=" info_item cur_jbzdyl">
				<img src="../assets/image/yl.png" alt="">
				<div class="item_text">
					<span class="label">江南最低压力</span>
					<span><span class="num">0.6</span>(Mpa)</span>
				</div>
			</span>
			<span class="info_item cur_dybg">
				<img src="../assets/image/yl.png" alt="">
				<div class="item_text">
					<span class="label">江南最低压力</span>
					<span><span class="num">0.6</span>(Mpa)</span>
				</div>
			</span>
			<span class="info_item cur_drbj">
				<img src="../assets/image/yl.png" alt="">
				<div class="item_text">
					<span class="label">江南最低压力</span>
					<span><span class="num">0.6</span>(Mpa)</span>
				</div>
			</span>
		</div> -->
		<div class="selectGW">
			<div class="select_wrap">
				<span class="label">管材：</span>
				<el-select v-model="selectVal_GC" placeholder="">
					<el-option
					v-for="item in options_GW"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="select_wrap">
				<span class="label">管径：</span>
				<el-select v-model="selectval_GJ" placeholder="">
					<el-option
					v-for="item in options_GJ"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
			</div>
		</div>
		<!-- 设备状态 -->
		<div class="equipments_status">
			<span class="label">设备状态：</span>
			<span class="item normal">正常</span>
			<span class="item unnormal">异常</span>
			<span class="item offline">离线</span>
		</div>
		<!-- <BottomPanel></BottomPanel> -->
		<!-- 进度条 -->
		<TimePlayer startTime="2" endTime="24" hasDate="true" formatter="hh:mm" interval_time="4" step="2" @startPlay="addPressureMarker(timm)" ></TimePlayer>
	</div>
</template>

<script>
let group1121 = require('@/assets/image/mapbar/Group 1121.png');
let group1122 = require('@/assets/image/mapbar/Group 1122.png');
let group1123 = require('@/assets/image/mapbar/Group 1123.png');
let vector2 = require('@/assets/image/mapbar/Vector-2.png');
let vector3 = require('@/assets/image/mapbar/Vector-3.png');
import {getCcylbh} from '@/api/index'
import PanelWrap from '@/components/PanelWrap'
import TimePlayer from '@/components/TimePlayer'
import RefreshPanel from '../components/RefreshPanel';
import util from '../js/util';
export default {
	name: 'HomePage',
	components:{
		PanelWrap,
		TimePlayer,
		RefreshPanel
	},
	data() {
		return {
			fullTime: '',
			week: '',
			topActiveTab:0,//顶部选中tab
			gcActiveTab:0,
			gcSearchTime:'',
			curStand:{
				DRGSL:44,
				SBZXL:44,
				DRBJ:44,
				DQLSL:44,
				MSYL:0.36
			},
			switch_jnsc:1,
			switch_jbsc:0,
			switch_gx:1,
			switch_xhs:0,
			switch_fm:0,
			switch_sb:0,
			switch_bg:0,
			switch_lsd:0,
			switch_ycyljcd:0,
			switch_jxyljc:0,
			switch_lljcd:0,
			switch_szjcd:0,
			mapBarList:[
					[{
						index:1,
						label:'江南水厂',
						num:'',
						img:group1121,
						hasSwitch:false,
						switch:'true'
					},
					{
						index:2,
						label:'江北水厂',
						num:'',
						img:group1122,
						hasSwitch:false,
						switch:'false'
					}],
					[
						{
							index:3,
							label:'管线',
							num:'',
							img:vector2,
							hasSwitch:false,
							switch:'false'
						}
					],
					[
						{
							index:4,
							label:'压力监测点',
							num:'',
							img:group1123,
							hasSwitch:false,
							switch:'false'
						}
					],
					[
						{
							index:5,
							label:'爆管',
							num:'',
							img:vector3,
							hasSwitch:false,
							switch:'false'
						}
					]
				],
			showMarkerLayer:true,
			map:null,
			layerGroup:null,
			// polyline_gxArr:[],//管线数据
			mapElementsArray:{},
			pipesLayerGroup:null,//添加管线的群组
			overlayGrroups_ylb:null,//添加压力表的群组
			overlayGroups_yly:null,//添加余氯仪的群组
			config_GJ:{
				200:1,
				300:2,
				400:3,
				600:4
			},
			selectVal_GC:'全部',
			options_GW:[
				{value:'全部',label:'全部'},
				{value:'铸铁',label:'铸铁'},
				{value:'钢',label:'钢'},
				{value:'PE',label:'PE'}
			],
			selectval_GJ:'200',
			options_GJ:[
				{
					value:'200',
					label:'>=200mm'
				},
				{
					value:'300',
					label:'>=300mm'
				},
				{
					value:'400',
					label:'>=400mm'
				},
				{
					value:'600',
					label:'>=600mm'
				}
			],
			getfulldate:'',
			// date_week:'',
			gjlbist:[],
			timer:'',
			bjlbist:[],
			ycylsjList:[],//远程压力数据
			pipesLayerGroup:null,
			curTime:'',
			curTime_ylfbtj:'',//压力分布统计刷新时间
		}
	},
	comments: {
	},
	created(){	
		this.curTime = util.getFullDate(1);
	},
	mounted() {
		// this.mapBarList = this.mapBarList_init;
		this.initMap();
		this.$nextTick(() => {
			this.initExfactoryPressure();
			this.initCCYLBH();
			// //雨量概况
			// this.initChart_ylgk();
			// //重点检测
			this.initChart_zdjc();
			// //远程压力数据
			// //压力机械表数据
			// //告警事件
			// // this.initGJSJ();
			// //爆管记录
			this.initChart_bgjl();
			// //设备统计
			this.initChart_sbtj();
			// //压力监测-报警列表
			this.initBJLB();
			// //压力监测-分区网管平均压力
			this.initChart_ylfbtj();
		})
		
	},
	beforeDestroy(){
		this.map.gl.getExtension('WEBGL_lose_context').loseContext() ;
	},
	watch: {
		selectval_GJ(val){
			this.selectPipeLine(this.selectVal_GC,val);
		},
		selectVal_GC(VAL){
			this.selectPipeLine(VAL,this.selectval_GJ);
		}
	},
	methods: {
		initMap(){
			window._AMapSecurityConfig = {
				securityJsCode:'f942bcd483b14957dd25aa7039f85570',
			}
            this.$AMapLoader.load({
				key: "7ba1c234cc901e5f5bd9f3e2f444abac",             // 申请好的Web端开发者Key，首次调用 load 时必填
				// key:'e43e1003d8b128cad822ef01ae24e4d4',
				version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				plugins: [''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				Loca:{
					version:'2.0.0'
				}
			}).then((AMap) => {
				this.map = new AMap.Map("map", {  //设置地图容器id
					viewMode: "3D",    //是否为3D地图模式
					zoom: 15,           //初始化地图级别
					center: [105.066476, 28.740807], //初始化地图中心点位置
					mapStyle: 'amap://styles/9eb96389790fbf01cc795d7d86d1baf3',
					// mapStyle: 'amap://styles/d3a59cf36af457e0da4b54722d475763',
					zIndex:10,
					pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
				});
				this.addPipeToMap();
				this.addPressureMarker();  
				this.map.on('click',function(e){
				})
			})      
		},		
		hideHome(){
			this.topActiveTab = 100;
		},	
		
		//向地图添加数据
		addDataToMap(mapData){
			mapData.map(item => {
					let iconImgSrc = '';
					// let markerArray = [];
					let attrName = '';
					let show = false;
					let size = '';
					if('江北水厂' == item.type){
						attrName = 'jbsc';
						iconImgSrc = group1122;
					}else if('江南水厂' == item.type){
						attrName = 'jnsc';
						iconImgSrc = group1121;
						show = true;
					}
					let lnglat = item.nodes[0].coordinate;
					
					var labelMarker = new AMap.LabelMarker({
                        position:lnglat,
                        opacity: 1,
                        zIndex: 2,                        
                        icon:{
                            size:size || [30,45],
                            image:iconImgSrc,
                            imageSize:[30,45]
                        } 
                    });
                    let labelsLayer = new AMap.LabelsLayer({
                        collision: true,
                    });
                    labelsLayer.add(labelMarker);
                    this.map.add(labelsLayer);
                    //添加layerGroup
                    let layerGroup = new AMap.LayerGroup([labelsLayer]);
                    layerGroup.setMap(this.map);

					//添加到组件数据上
					this.mapElementsArray[attrName] = layerGroup;
					
                   if(!show){
						labelsLayer.hide();
				   } 
			})
		},
		//添加压力marker
		addPressureMarker(time){
			let icon1 = require('@/assets/image/jcd_normal.png');
			let icon2 = require('@/assets/image/jcd_notwork.png');
			let icon3 = require('@/assets/image/jcd_warning.png');	
			let params = time ? {'startTime':time}:{};
			let that = this;
			//请求
			this.$axios.post('http://43.136.137.111:9898/system/pipe/network/all',params).then(res => {
				let markerArr = [];//地图上压力计标记
				res.data.forEach(item => {
					let lnglat = [+(item.pressureNode.longitude),+(item.pressureNode.latitude)];
					let iconImgSrc = null;
					if(!item.value){
						iconImgSrc = icon2;
					}else if(item.value >= 0.3){
						iconImgSrc = icon3;
					}else if(item.value < 0.3 && item.value > 0.1){
						iconImgSrc = icon1;
					}
					let value = (+item.value).toFixed(4) || '';
					var labelMarker = new AMap.LabelMarker({
                        position:lnglat,
                        opacity: 1,
                        zIndex: 2,                        
                        icon:{
                            size:[75, 80],
                            image:iconImgSrc,
                            imageSize:[75, 80]
                        },            
						text:{
							content:value,
							direction :'top',
							offset:[0,25],
							style:{
								fontSize: 15,
            					fillColor: '#fff',
							}
						},
					});	
					let pressureNode = item.pressureNode;
					labelMarker.on('click',(e) => {
						let code = pressureNode.code;
						let name = pressureNode.name;
						let batteryValue = pressureNode.batteryValue;
						let installTime = pressureNode.installTime;
						let installAddress = pressureNode.street;
						let pressureVos = pressureNode.pressureVos;
						let htmlStr = `<div class="infoWindow" v-show="showInfoWindow">
											<div v-if="1==2" class="top">
												<span class="title">设备基本信息</span>
											</div>
											<div class="content">
												<div class="info">
													<div class="info_img">
													</div>
													<ul class="info_decs">
														<li>
															<span class="label">编号：</span>
															<span class="val">${code}</span>
														</li>
														<li>
															<span class="label">名称：</span>
															<span class="val">${name}</span>
														</li>
														<li>
															<span class="label">电池：</span>
															<span class="val">${batteryValue}</span>
														</li>
														<li>
															<span class="label">安装时间：</span>
															<span class="val">${installTime}</span>
														</li>
														<li>
															<span class="label">位置：</span>
															<span class="val">${installAddress}</span>
														</li>
													</ul>
												</div>
												<div class="charts_press">
													<div class="title">
														<span class="text">24小时压力变化曲线</span>
														<span class="icon"></span>	
													</div>
													<div id="chart_press"></div>
												</div>
											</div>
										</div>`;
						that.infoWindow = new AMap.InfoWindow({
							content:htmlStr,
							offset:[0,-25]
						})
						that.infoWindow.open(that.map,e.target._position);
						that.paintChart_press(pressureVos);
						
					})
				
					var labelsLayer = new AMap.LabelsLayer({
						collision: true,
					});
					// 将 LabelMarker 实例添加到 LabelsLayer 上
					labelsLayer.add(labelMarker);
					// 将 LabelsLayer 添加到地图上
					this.map.add(labelsLayer);
					markerArr.push(labelsLayer)
					//远程压力数据
					this.ycylsjList.push(item);
				})
				// //添加到组件数据上
				this.mapElementsArray['yl'] = markerArr;
			})
		},
		paintChart_press(data){
			let datas = [];
			let times = [];
			for (let i = 0; i < data.length; i++) {
				const element = data[i];
				datas.push(element.pressureValue);
				times.push(element.collectTime);
			}
			let option = {
					title: {
						show:false
					},
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					tooltip: {
						trigger: 'axis'
					},
					grid: {
						top:'25%',
						left: '10%',
						right: '10%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: times
					},
					yAxis: {
						type: 'value',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						},
						name: '(Mpa)'						
					},
					series: [
						{
							name: '24小时压力变化曲线',
							type: 'line',
							stack: 'Total',
							data:datas,
							symbol:'none',
							lineStyle:{
								color:'#E7A808'
							},
							areaStyle:{
								color:{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(231, 168, 8, 0.2)' // 0% 处的颜色
									}, {
										offset: 1, color: 'rgba(231, 168, 8, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
									//background: linear-gradient(360deg, rgba(231, 168, 8, 0.2) 28.99%, rgba(231, 168, 8, 0) 100%);

								}
							}
						}
					]
					};
				var myChart = this.$echarts.init(document.getElementById('chart_press'));
				myChart.setOption(option);
		},
		addPipeToMap(_time){
			//先清空
			let that = this;
			let time = _time || `${new Date().getHours()}:00`;
			this.$axios.post('http://43.136.137.111:9898/jiangan/pipe/network/pressure/rest',{time:time}).then(res => {
				if(res.status == 200){
					let pipeData = res.data.data	
					let polylineArr = [];
					for (let i = 0; i < pipeData.length; i++) {
						const element = pipeData[i];
						let path = element.coordinates;
						let color = '';
						if(element.pressureValue > 0 && element.pressureValue <= 0.1){
							color = '#12EBF2';
						}else if(element.pressureValue > 0.1 && element.pressureValue <= 0.2){
							color = '#14C111';
						}else if(element.pressureValue > 0.2 && element.pressureValue <= 0.3){
							color = '#0F5CF0';
						}else if(element.pressureValue > 0.3 && element.pressureValue <= 0.4){
							color = '#F08B15';
						}
						var Polyline = new AMap.Polyline({
								path: path,  
								strokeWeight: 6, // 线条宽度，默认为 1
								strokeColor: color, // 线条颜色
								lineJoin: 'round', // 折线拐点连接处样式
								zIndex:1,
								bubble :true,
								strokeWeight :5,
								isOutline:true,
								geodesic:true,
								lineCap:'round'
							});
							polylineArr.push(Polyline)						
					}
					var layerGroup = new AMap.LayerGroup(polylineArr);
					that.pipesLayerGroup = layerGroup;
    				layerGroup.setMap(that.map);
				}
			})	
		},
		/**
		 * 查询历史数据
		 * @param {*} time 时间 
		 * @param {*} date 日期
		 */
		playData(time,date){

		},
		// createInfoWindow(){
		// 	let that = this;
		// 	this.infoWindow = new AMap.InfoWindow({
		// 		content: that.content_info,
		// 		autoMove:true,
		// 		anchor:'middle-right'	
		// 	});
		// },	
		hideMarkerLayer(){
			if(!this.showMarkerLayer){
				this.layerGroup.hide();
			}else{
				this.layerGroup.show();
			}
			this.showMarkerLayer = !this.showMarkerLayer;
		},
		//出厂压力
		initExfactoryPressure(){
			let option1= {
				series: [
					{
					type: 'gauge',
					startAngle: 180,
					endAngle: 0,
					center: ['50%', '90%'],
					radius: '160%',
					min: 0,
					max: 0.5,
					splitNumber: 10,
					axisLine: {
						lineStyle: {
						width: 2,
						color: [
							[0.5, '#58D9F9'],
							[0.8, '#FDDD60'],
							[1, '#FF6E76'],
						]
						}
					},
					pointer: {
						icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
						length: '18%',
						width: 10,
						offsetCenter: [0, '-45%'],
						itemStyle: {
						color: 'auto'
						}
					},
					axisTick: {
						length: 5,
						lineStyle: {
						color: 'auto',
						width: 1
						},
						splitNumber:10
					},
					splitLine: {
						length: 10,
						lineStyle: {
						color: 'auto',
						width:1
						}
					},
					axisLabel: {
						show:false,
					},
					title: {
						offsetCenter: [0, '-10%'],
						fontSize: 14,
						color:'rgba(255,255,255,0.6)'
					},
					detail: {
						fontSize: 18,
						offsetCenter: [0, '-25%'],
						color: 'auto'
					},
					data: [
						{
						value:0.28,
						name: 'Mpa'
						}
					]
					}
				]
				};
				let option2= {
				series: [
					{
					type: 'gauge',
					startAngle: 180,
					endAngle: 0,
					center: ['50%', '90%'],
					radius: '160%',
					min: 0,
					max: 0.5,
					splitNumber: 10,
					axisLine: {
						lineStyle: {
						width: 2,
						color: [
							[0.5, '#58D9F9'],
							[0.8, '#FDDD60'],
							[1, '#FF6E76'],
						]
						}
					},
					pointer: {
						icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
						length: '18%',
						width: 10,
						offsetCenter: [0, '-45%'],
						itemStyle: {
						color: 'auto'
						}
					},
					axisTick: {
						length: 5,
						lineStyle: {
						color: 'auto',
						width: 1
						},
						splitNumber:10
					},
					splitLine: {
						length: 10,
						lineStyle: {
						color: 'auto',
						width:1
						}
					},
					axisLabel: {
						show:false,
					},
					title: {
						offsetCenter: [0, '-10%'],
						fontSize: 14,
						color:'rgba(255,255,255,0.6)'
					},
					detail: {
						fontSize: 18,
						offsetCenter: [0, '-25%'],
						color: 'auto'
					},
					data: [
						{
						value:0.31,
						name: 'Mpa'
						}
					]
					}
				]
				};
			var myChart_jb = this.$echarts.init(document.getElementById('chart_EFP_jb'));
			myChart_jb.setOption(option1);
			var myChart_jn = this.$echarts.init(document.getElementById('chart_EFP_jn'));
			myChart_jn.setOption(option2);

		},
		initCCYLBH(){
			getCcylbh().then(res => {
				let datas = [];
				let times = [];
				for (let i = 0; i < res.data.length; i++) {
					const element = res.data[i];
					datas.push(element.pressureValue);
					times.push(element.collectTime);
				}
				let option = {
						title: {
							show:false
						},
						textStyle:{
							color:'#FFFFFF',
							fontSize:'14px'
						},
						tooltip: {
							trigger: 'axis'
						},
						grid: {
							top:'5%',
							left: '5%',
							right: '5%',
							bottom: '5%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: times
						},
						yAxis: {
							type: 'value',
							splitLine:{
								lineStyle:{
									color:'rgba(255, 255, 255, 0.2)'
								}
							},
							name: '(Mpa)'						
						},
						series: [
							{
								name: '24小时压力变化曲线',
								type: 'line',
								stack: 'Total',
								data:datas,
								symbol:'none',
								lineStyle:{
									color:'#9BC2D4'
								},
								areaStyle:{
									color:{
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0, color: 'rgba(155, 194, 212, 0.2)' // 0% 处的颜色
										}, {
											offset: 1, color: 'rgba(155, 194, 212, 0)' // 100% 处的颜色
										}],
										global: false // 缺省为 false
									}
								}
							}
						]
					};
				var myChart = this.$echarts.init(document.getElementById('chart_ccylbh'));
				myChart.setOption(option);
			})

		},
		checkGcTab(index){
			this.gcActiveTab = index;			
		},
		//雨量概况
		initChart_ylgk(){
			let option = {				
				series: [
					{
						type: 'gauge',
						startAngle: 150,
						endAngle: 30,
						center: ['25%', '65%'],
						radius: '130%',
						min: 0,
						max: 1,
						splitNumber:2,
						axisLine: {
							lineStyle: {
							width: 6,
							color: [
								[0.25, '#58D9F9'],
								[0.75, '#FDDD60'],
								[1, '#FF6E76'],
							]
							}
						},
						pointer: {
							icon: 'arrow',
							length: '38%',
							width: 5,
							offsetCenter: [10, '-55%'],
							itemStyle: {
							color: 'auto'
							}
						},
						axisTick: {
							length: 10,
							lineStyle: {
							color: 'auto',
							width: 5
							},
							splitNumber:1,
							distance:0
						},
						splitLine: {
							length: 1,
							lineStyle: {
							color: 'auto',
							width:5
							}
						},
						axisLabel: {
							show:false,
						},
						title: {
							offsetCenter: [0, 0],
							fontSize: 14,
							color:'rgba(255,255,255,0.6)'
						},
						detail: {
							fontSize: 18,
							offsetCenter: [0, '-25%'],
							color: 'auto'
						},
						data: [
							{
							value: 0.28,
							name: 'Mpa'
							}
						]
					},
					{
						type: 'gauge',
						startAngle: 150,
						endAngle: 30,
						center: ['75%', '65%'],
						radius: '130%',
						min: 0,
						max: 1,
						splitNumber:2,
						axisLine: {
							lineStyle: {
							width: 6,
							color: [
								[0.25, '#58D9F9'],
								[0.75, '#FDDD60'],
								[1, '#FF6E76'],
							]
							}
						},
						pointer: {
							icon: 'arrow',
							length: '38%',
							width: 5,
							offsetCenter: [10, '-55%'],
							itemStyle: {
							color: 'auto'
							}
						},
						axisTick: {
							length: 10,
							lineStyle: {
							color: 'auto',
							width: 5
							},
							splitNumber:1,
							distance:0
						},
						splitLine: {
							length: 1,
							lineStyle: {
							color: 'auto',
							width:5
							}
						},
						axisLabel: {
							show:false,
						},
						title: {
							offsetCenter: [0, 0],
							fontSize: 14,
							color:'rgba(255,255,255,0.6)',
							lineHeight:'10'
						},
						detail: {
							fontSize: 18,
							offsetCenter: [0, '-25%'],
							color: 'auto'
						},
						data: [
							{
							value: 0.32,
							name: 'Mpa'
							}
						]
					},
				]
				};
			var myChart_jb = this.$echarts.init(document.getElementById('chart_ylkg'));
			myChart_jb.setOption(option);
		},
		//重点监测
		initChart_zdjc(){
			this.$axios.get('http://43.136.137.111:9898/system/mock/data12',{}).then(res => {
				let data = res.data.data;
				let nameArr = [];
				data.forEach(element => {
					nameArr.push(element.name);
				});
				let option = {
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					dataZoom: {
						type:'slider',
						show:true,
						start:0,
						end:20,
						orient:'horizontal'
					},
					tooltip: {
						trigger: 'axis'
					},
					// legend: {
					// 	data: ['测压点1','测压点2','测压点3','测压点4','测压点5'],
					// 	// itemGap: 10
					// 	textStyle:{
					// 		color:'#FFFFFF'
					// 	}
					// },
					legend: {
						data: ['测压点1','测压点2','测压点3','测压点4','测压点5'],
						right:10,
						top:10,
						// icon:'rect',
						itemWidth:8,
						itemHeight:8,
						textStyle:{
							color:'#FFFFFF'
						}
					},
					xAxis: {
						type: 'category',
						data: data[0].date,
						lineStyle:{
							color:'rgba(255, 255, 255, 0.2)'
						},
						splitLine:{
							show:false
						}
					},
					yAxis: {
						type: 'value',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						},
						name:'Mpa'
					},
					series: [
						{
							data: data[0].value,
							type: 'bar',
							barWidth :4,
							name:'测压点1'						
						},
						{
							data: data[1].value,
							type: 'bar',
							barWidth :4,
							name:'测压点2'					
						},
						{
							data: data[2].value,
							type: 'bar',
							barWidth :4,
							name:'测压点3'						
						},
						{
							data: data[3].value,
							type: 'bar',
							barWidth :4	,
							name:'测压点4'						
						},
						{
							data: data[4].value,
							type: 'bar',
							barWidth :4,
							name:'测压点5'						
						}
					],
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
				}
				var myChart = this.$echarts.init(document.getElementById('chart_zdjc'));
				myChart.setOption(option);
			
			})
		},
		//爆管记录
		initChart_bgjl(){
			this.$axios.get('http://43.136.137.111:9898/system/mock/data16').then(res => {
				let option = {
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					title: {
						show:false
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
						type: 'shadow'
						}
					},
					legend: {
						textStyle:{
							color:'#ffffff'
						},
						top:10,
						right:10
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: true,
						data:res.data.data[0].date
					},
					yAxis: {
						type: 'value',
						name:'次',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						}
					},
					series: [
						{
							name: res.data.data[0].name,
							type: 'bar',
							data: res.data.data[0].value,
							roundCap:true,
							itemStyle:{
								borderWidth:2,
								borderColor:{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: '#0CAFC6' // 0% 处的颜色
									}, {
										offset: 1, color: 'rgba(123, 205, 252, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								},
								color:{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(123, 205, 252, 0.2)' // 0% 处的颜色
									}, {
										offset: 1, color: 'rgba(123, 205, 252, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						},
						{
							name: res.data.data[1].name,
							type: 'bar',
							data:  res.data.data[1].value,
							roundCap:true,
							itemStyle:{
								borderWidth:2,
								borderColor:{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(246, 195, 14, 1)' // 0% 处的颜色
									}, {
										offset: 1, color: 'rgba(249, 198, 20, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								},
								color:{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(252, 224, 123, 0.2)' // 0% 处的颜色
									}, {
										offset: 1, color: 'rgba(252, 224, 123, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						}
					]
				};
				var myChart = this.$echarts.init(document.getElementById('chart_bgjl'));
				myChart.setOption(option);				
			})
		},
		//统计
		initChart_sbtj(){
			let option = {
					tooltip: {
						trigger: 'item',
						formatter: '{b}\n{c}'
					},
					series: [						
						{
							type: 'pie',
							radius: ['52%', '62%'],
							labelLine: {
								show:false,
								length: 10
							},
							label: {
								show:false,
								textStyle:{
									color:'#FFFFFF',							
								},
								formatter: '{b}\n{c}',
							},
							data: [
								{ value: 170,name:'正常'},
								{ value: 10,name:'离线'},
								{ value: 30,name:'报警'},
							],
							itemStyle: {
								normal: {
									color: function(colors) {
										var colorList = [
											'#20A1E9', '#D81E06','#EBA431'
											];
										return colorList[colors.dataIndex]
									}
								}
							},

						}
					]
				};

			let myChart = this.$echarts.init(document.getElementById('chart_sbtj'),option);
			myChart.setOption(option);
		},
		//压力监测-报警列表
		initBJLB(){
			this.$axios.get('http://43.136.137.111:9898/system/mock/data15').then(res => {
				this.bjlbist = res.data.data;
			})
		},
		//分区网管平均压力
		initChart_ylfbtj(){
			this.$axios.get('http://43.136.137.111:9898/jiangan/device/pressure/Distribution/number',{}).then(res => {
				let rangs = [];
				let values = [];
				this.curTime_ylfbtj = util.getFullDate(1);
				res.data.data.forEach((item)=>{
					rangs.push(item.range);
					values.push(item.total);
				})
				let option = {
					tooltip:{
						show:true
					},
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					xAxis: {
						type: 'value',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						},
					},
					yAxis: {
						type: 'category',
						data: rangs,
						lineStyle:{
							color:'rgba(255, 255, 255, 0.2)'
						},
						splitLine:{
							show:false
						}
					},
					series: [
						{
							data: values,
							type: 'bar',
							showBackground: true,
							itemStyle: {
								normal: {
									color: function(colors) {
										var colorList = [
										'#0BCE59','#20A1E9', '#D81E06','#EBA431'
											];
										return colorList[colors.dataIndex]
									}
								}
							}
							
						}
					],
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						top:'8%',
						containLabel: true
					},
				};
				var myChart = this.$echarts.init(document.getElementById('chart_ylfbtj'));
				myChart.setOption(option);
			})
		},
		selectPipeLine(pipe,pipeDiameter){
			this.mapElementsArray['gx'].map(item => {
				if (pipe == '全部'){
					if(item.extData.pipeDiameter >= pipeDiameter){
						item.show();
					}else{
						item.hide();
					}
				}else{
					if(item.extData.pipe == pipe && item.extData.pipeDiameter >= pipeDiameter){
						item.show();
					}else{
						item.hide();
					}
				}
			})
		},
	},

}
</script>
<style lang="less" scoped>
ul {
	padding: 0;
	margin: 0;
}

li {
	list-style: none;
}

#home {
	position: relative;
	height: 100%;
	min-width: 1920px;	
	background-color: rgba(0,0,0,0.5);
	#map{
		/deep/.amap-maps{
				.amap-info{
					width:450px;
					.amap-info-content{
						padding:0px;		
						width: 100%;
						height: 502px;		
						background-color: transparent;
						overflow: hidden;
						.infoWindow{
							width:100%;
							height:100%;
							background: url('~@/assets/image/infowindow_bg.png') no-repeat;
							.top{
								width:100%;
								height:48px;							
								.title{
									font-family: 'Source Han Sans CN';
									font-style: normal;
									font-weight: 500;
									font-size: 18px;
									line-height: 48px;
									color: #B0E7FF;
									padding-left: 15px;
								}
							}
							.content{
								.info{
									display: flex;
									flex-direction: row;
									margin: 20px;
									.info_img{
										display: flex;
										flex-direction: row;
										width:193px;
										height:198px;
										background: url('~@/assets/image/jiejing.png') no-repeat 0 0;
										background-size: 100% 100%;
									}
									.info_decs{
										margin-left: 10px;
										font-size: 14px;
										color: #fff;
										line-height: 20px;
										li{
											margin-bottom: 20px;
											.label{
												color:#54B8F8;
											}
										}									
									}
								}
								.charts_press{
									border-top:1px solid rgba(255,255,255,0.2);
									width:100%;
									height:250px;
									.title{
										height: 20px;
										width: 100%;
										margin-top: 10px;
										padding-left: 20px;
										.text{
											font-weight: 400;
											font-size: 16px;
											line-height: 27px;
											color: #B9EDFF;
										}
										.icon{
											display: inline-block;
											margin-left: 25px;
											width: 40px;
											height: 10px;
											background: url('~@/assets/image/Decorate@1x.png') no-repeat;
											background-size: 100% 100%;
										}
									}
									#chart_press{
										width:450px;
										height:160px;
									}
								}
							}
						}
						.amap-info-close{
							right: 17px;
							top: 8px;
							width: 32px;
							height: 32px;
							color: transparent;
							background: url('~@/assets/image/infowindow_close.png');
						}
					}
				}
				
			}
	}
	.left_content {
		//数据概览
		.sjgl_panel{	
			/deep/.panel_title{
				.title_text{
					background: url('../assets/image/panelTitle/sjgl.png') no-repeat 20px 9px;
				}	

			}	
			.jnzdyl {
				background: url('../assets/image/yj.png') no-repeat;
			}
			.jbzdyl {
				background: url('../assets/image/yj.png') no-repeat;
			}

			.dybg {
				background: url('../assets/image/bg.png') no-repeat;
			}

			.drbj {
				background: url('../assets/image/yj.png') no-repeat;
			}
			.sjgl_content{
				.sjgl_statis{
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					margin-top: 24px;
					.ss_item {
						width: 182px;
						height: 60px;
						box-sizing: border-box;
						padding-left: 74px;
						margin-bottom: 24px;
						font-family: 'Source Han Sans CN';
						font-style: normal;
						font-weight: 400;
						font-size: 14px;
						line-height: 21px;
						color: rgba(255, 255, 255, 0.7);
						display: flex;
						flex-direction: column;
						background-size: 62px 62px;
						.label1{
							background-size: 86px 12px;
							background-repeat: no-repeat;
							background-position: 0px 10px;
							display: inline-block;
							text-align: left;
							width: 86px;
						}
						.label2{
							margin-top: 7px;
							width: 110px;
							background-size: 110px 24px;
							box-sizing: border-box;
							text-align: left;
							.num{
								font-size: 18px;
								line-height: 22px;
								color: #B9EDFF;
							}
						}
						
					}		
				}
				.line{
					width:100%;
					height:1px;
					background-color: rgba(255, 255, 255, .3)
				}
				// .sjgl_chart{
				// 	display: flex;
				// 	justify-content: center;
				// 	align-content: center;
				// 	margin-top: 10px;
				// 	.tab_group{
				// 		width:100px;
				// 		display: flex;
				// 		justify-content: center;
				// 		flex-direction: column;
				// 		text-align: center;
				// 		cursor: pointer;
				// 		.tab_label{
				// 			display: inline-block;
				// 			width:86px;
				// 			height:24px;
				// 			margin: 5px 0px;
				// 			font-family: 'Source Han Sans CN';
				// 			font-style: normal;
				// 			font-weight: 500;
				// 			font-size: 14px;
				// 			line-height: 24px;
				// 			color: #B9EDFF;
				// 		}
				// 		.tab_label_active{
				// 			background: url('~@/assets/image/Rectangle 649.png');
				// 			background-size: 100% 100%;
				// 		}
				// 	}
				// 	.content{

				// 	}
				// }
			}
		}
		//出厂压力
		.ccyl_panel{
			/deep/.panel_title{
				.title_text{
					background: url('../assets/image/panelTitle/ccyl.png') no-repeat 20px 9px;
				}	
			}
			.chart_wrap{
				height:120px;
				display: flex;
				#chart_EFP_jb{
					width: 180px;
					height: 100px;
				}
				#chart_EFP_jn{
					width: 180px;
					height: 100px;
				}
			}
			.charts_press{
					border-top:1px solid rgba(255,255,255,0.2);
					width:100%;
					height:247px;
					.title{
						height: 27px;
						width: 100%;
						margin-top: 23px;
						// padding-left: 40px;
						.text{
							font-weight: 400;
							font-size: 16px;
							line-height: 27px;
							color: #B9EDFF;
						}
						.icon{
							display: inline-block;
							margin-left: 25px;
							width: 24px;
							height: 10px;
							background: url('~@/assets/image/Decorate@1x.png') no-repeat;
							background-size: 100% 100%;
						}
					}
					#chart_ccylbh{
						width: 100%;
						height: 210px;
					}
				}	
			
		}
		// 压力概况
		.ylgk_panel{
			/deep/.title_text{
					background: url('~@/assets/image/panelTitle/ylgk.png') no-repeat;
				}	
			/deep/.panel_main{
				// border: 1px solid red;
				width: 100%;
				height: 110px;
				#chart_ylkg{
					width: 100%;
					height: 110px;
				}
			}		
		}

		// 重点检测
		.zdjc_panel{
			/deep/.title_text{
					background: url('~@/assets/image/panelTitle/zdjc.png') no-repeat 20px 9px;
				}	
				#chart_zdjc{
					width:100%;
					height: 210px;
				}
		}
		.ycylsj_panel{
			/deep/.title_text{
					background: url('~@/assets/image/panelTitle/ycylsj.png') no-repeat;
				}	
			.my_table{
				width:100%;
				height: 500px;
				overflow: hidden;
			}
		}
		.ylsj_panel{
			/deep/.title_text{
					background: url('~@/assets/image/panelTitle/ycylsj.png') no-repeat ;
				}	
		}
		.gjsj_panel{
			/deep/.title_text{
					background: url('~@/assets/image/panelTitle/gjsj.png') no-repeat ;
				}	
				.table_gjsj{
					height: 138px;
					overflow: hidden;					
					.table_content{
						height: auto;
						width: 100%;
						animation: myMove 30s linear infinite;
						.d_dt{
						width:180px;
					}
					}
					/*文字无缝滚动*/
					@keyframes myMove {
						0% {
							transform: translateY(0);
						}

						100% {
							transform: translateY(-100%);
						}
					}
				}
				
		}
	}
	.right_content{
		.panel_wrap{
			.panel_title{		
				.ccyl_title {
					background: url('../assets/image/ccyl.png') no-repeat 20px 9px;
				}

				.gsl_title {
					background: url('../assets/image/gsl.png') no-repeat 20px 9px;
				}

				.yjzxsl_title {
					background: url('../assets/image/yjzxsl.png') no-repeat 20px 9px;
				}

				.gssl_title {
					background: url('../assets/image/ssl.png') no-repeat 20px 9px;
				}

				.gsl_title{
					background: url('../assets/image/gsl.png') no-repeat 20px 9px;
				}
				.yjzxsl_title{
					background: url('../assets/image/yjzxsl.png') no-repeat 20px 9px;
				}
				.ssl_title{
					background: url('../assets/image/ssl.png') no-repeat 20px 9px;
				}				
			}				
		}
		.gsl_panel{
			/deep/.title_text{
				background: url('~@/assets/image/gsl.png') no-repeat 20px 9px;
			}
			#chart_gsl{
				width: 100%;
				height: 245px;
				// border: 1px solid green;
			}
		}
		.yjzxsl_panel{
			/deep/.title_text{
				background: url('~@/assets/image/yjzxsl.png') no-repeat 20px 9px;
			}
			#chart_yjzxsl{
				width: 100%;
				height: 195px;
				// border: 1px solid green;
			}
		}
		.ssl_panel{
			/deep/.title_text{
				background: url('~@/assets/image/ssl.png') no-repeat 20px 9px;
			}
			#chart_panel{
				width: 100%;
				height: 195px;
				// border: 1px solid green;
			}
		}
		.content_yjzxsl{
			#chart_yjzxsl{
				width: 100%;
				height: 240px;
				// border: 1px solid green;
			}
		}
		.ssl_panel{
			#chart_ssl{
				width: 100%;
				height: 230px;
				// border: 1px solid green;
			}
		}

		// 数据统计
		.sbtj_panel{
			/deep/.title_text{
				background: url('~@/assets/image/panelTitle/sbtj.png') no-repeat 20px 9px ;
			}
			/deep/.panel_main{
				display: flex;
				.statis_list{
					display: flex;
					flex-direction: column;
					align-content: center;
					align-items: flex-start;
					justify-content: center;
					.sta_li{
						display: inline-block;
						// width:100%;
						height:28px;
						padding:5px 0px;
						.icon{
							display: inline-block;
							width:24px;
							height:24px;
							vertical-align: middle;
						}
						.text{
							font-family: 'Source Han Sans CN';
							font-style: normal;
							font-weight: 400;
							font-size: 14px;
							line-height: 21px;
							color: rgba(255, 255, 255, 0.6);
						}
						.num{
							font-size: 18px;
							line-height: 22px;
						}
					}
				}
				.normal{
					.icon{
						background: url('~@/assets/image/normal.png');
						background-size: 100% 100%;
					}
					.num{
						color: #20A1E9;
					}
				}
				.outline{
					.icon{
						background: url('~@/assets/image/outline.png');
						background-size: 100% 100%;
					}
					.num{
						color: #D81E06;
					}
				}
				.warning{
					.icon{
						background: url('~@/assets/image/warning.png');
						background-size: 100% 100%;
					}
					.num{
						color:  #EBA431;
					}
				}
				// .notwork{
				// 	.icon{
				// 		background: url('~@/assets/image/notwork.png');
				// 		background-size: 100% 100%;
				// 	}
				// 	.num{
				// 		color: #20A1E9;
				// 	}
				// }
				#chart_sbtj{
					width: 200px;
					height: 150px;
					background: url('~@/assets/image/circle_bg.png') no-repeat;
					background-size: auto 100%;
					background-position-x: 25px;
				}
			}
		}	
		// 分区官网平均压力
		.ylfbtj_panel{
			/deep/.title_text{
				background: url('~@/assets/image/panelTitle/ylfbtj.png') no-repeat 20px 9px;
			}
			#chart_ylfbtj{
				width:437px;
				height:210px;
			}
		}	
		// 报警列表
		.bjlb_panel{
			/deep/.title_text{
				background: url('~@/assets/image/panelTitle/bjlb.png') no-repeat;
				background-position: 20px 9px;
			}
			.my_table{
				width:100%;
				height: 250px;
				.warning_list{
					height: 200px;
					overflow: hidden;
					.d_time{
						width: 120px;
					}
					.icon{
						background-repeat: no-repeat;
						background-size: 100%;
						vertical-align: middle;
					}
					.d_time{
							.icon{
								display: inline-block;
								width: 15px;
								height: 13px;								
								margin-right: 5px;
							}
						}
					.d_level{
						width: 50px;
						.icon{
							display: inline-block;
							width: 20px;
							height: 14px;
							margin-left: 5px;
							background-repeat: no-repeat;
							background: url('~@/assets/image/Vector.png');
						}
					}
					.level1{
						.d_time{
							.icon{
								background:url('~@/assets/image/Subtract.png');
							}
						}
						.d_level{
							color: rgba(255, 5, 5, 1);
						}
					}
					.level2{

						.d_time{
							.icon{
								background:url('~@/assets/image/Subtract-1.png');
							}
						}
						.d_level{
							color: rgba(255, 155, 5, 1);
						}
					}
					.level3{
						.d_time{
							.icon{
								background:url('~@/assets/image/Subtract-2.png');
							}
						}
						.d_level{
							color: rgba(187, 199, 14, 1);
						}

					}

				}
			}
		}		
		// 爆管记录
		.bgjl_panel{
			width:100%;
			/deep/.title_text{
				background: url('~@/assets/image/panelTitle/bgjl.png') no-repeat;
				background-position: 20px 9px;
			}
			#chart_bgjl{
				width:437px;
				height:180px;
			}
		}		
	}
	//顶部的当日指标面板
	.top_infoshow{
		position: absolute;
		left: 490px;
		top: 117px;
		width: 576px;
		height: 190px;
		// background: url('../assets/image/jczb_ng@1x.png');
		display: flex;
		align-content: space-around;
		box-sizing: border-box;
		padding: 0 10px;
		.cur_standNum{
			font-size: 32px;
			font-weight: 700;
			color: #0BAEC6;
			width: 112px;
			text-align: center;
			line-height: 268px;
		}
	}
	.top_infoshow_home{				
		background-color: rgba(10, 38, 54,0.7);
		background: url('../assets/image/jczb_ng@1x.png');
	}
	.top_infoshow_yl{
		width: 100%;
		height: auto;
		left: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		.info_item{
			display: flex;
			color: #ffffff;
			padding: 10px;
			    background-color: rgba(10, 38, 54,0.7);
			.item_text{
				display: flex;
				flex-direction: column;
				padding: 0 10px;
				font-size: 14px;
				line-height: 18px;
				color: rgba(255, 255, 255, 0.7);
				.num{
					font-family: 'DIN Next LT Pro';
					font-style: normal;
					font-weight: 700;
					font-size: 28px;
					line-height: 34px;
					color: #0CAFC6;
				}

			}
		}
	}
	.bar_right{
		width: 152px;
		top:117px;
		right:474px;
		.bar_wrap{
			border-bottom: 0.4px solid rgba(255, 255, 255, 0.15);
			.bar_item{
				position: relative;
				display: flex;
				align-content: space-between;
				height: 42px;
				line-height: 42px;
				padding: 0 15px;
				font-family: 'Inter';
				font-style: normal;
				font-weight: 400;
				font-size: 14px;
				.left_label{
					color: rgba(255, 255, 255, 0.7);
					flex: 1;
						img{
						vertical-align: middle;
					}
					.bar_label{
						padding-left: 3px;
					}
				}
				.right_opt{
					color: #FFFFFF;
					.el-switch{
						width: 28px;
						height: 14px;
					/deep/.el-switch__core{
						border: none;
					}
					/deep/.el-switch__core:after{
						width:13px;
						top: 2px;
					}
				}
			}
			
			
		}
		}
		
	}
	
	.gs_item_t{
			display: inline-block;
			width: 96px;
			height: 26px;
			background: url('../assets/image/k.png');
			font-family: 'Source Han Sans CN';
			font-style: normal;
			font-weight: 500;
			font-size: 14px;
			line-height: 21px;
			color: #FFFFFF;
			box-sizing: border-box;
			padding: 2px 18px;
			margin-bottom: 19px;
		}
	.el-date-editor{
		position: absolute;
		top: 5px;
		right: 0;
		width: 115px;
		/deep/.el-input__inner{
			height: 24px;
			padding-left: 10px;
			background: linear-gradient(180deg, rgba(123, 205, 252, 0) 0%, rgba(123, 205, 252, 0.2) 100%);
			border: 1px solid #003A52;
			color: #FFFF;
			border-radius: 0px;
		}
		/deep/.el-input__prefix{
			right: 0px;
			text-align: right;
			.el-input__icon{
				line-height: 26px;
			}
		}
		/deep/.el-input__suffix{
			display: none;
		}
		.el-input--prefix .el-input__inner{
			padding-left: 0;
		}
	}

	.selectGW{
		position: absolute;
		right: 647px;
		top: 117px;
		// bottom:120px;
		.select_wrap{
			width: 178px;
			height: 24px;
			background: linear-gradient(90deg, rgba(123, 205, 252, 0.1) -42.55%, rgba(123, 205, 252, 0.2) 96.15%);
			border-radius: 2px;
			// transform: matrix(-1, 0, 0, 1, 0, 0);
			display:flex;
			margin-bottom: 15px;
			border: 1px solid;
    		border-image: linear-gradient(90deg, rgba(181, 188, 190, 0.4), rgba(181, 188, 190, 0)) 10;
			.label{
				display: inline-block;
				width: 60px;
				color: rgba(255, 255, 255, 0.6);
				padding: 2px 5px;
			}	
			.el-select {
				width:120px;
				height:24px;

				/deep/.el-input {
					input::-webkit-input-placeholder {
						/* WebKit browsers */
						color: rgba(255, 255, 255, 0.6);
					}

					input:-moz-placeholder {
						/* Mozilla Firefox 4 to 18 */
						color: rgba(255, 255, 255, 0.6);
					}

					input::-moz-placeholder {
						/* Mozilla Firefox 19+ */
						color: rgba(255, 255, 255, 0.6);
					}

					input:-ms-input-placeholder {
						/* Internet Explorer 10+ */
						color: rgba(255, 255, 255, 0.6);
					}

					.el-input__inner {
						height:24px;
						// border: 1px solid #235A8D;
						border: none;
						// border-radius: 4px;
						// background: rgba(35, 90, 141, 0.6);
						// color: rgba(255, 255, 255, 0.6);
						color: #FFFFFF;
						background-color: transparent;
						border-radius: 0;
						padding-left: 0;
					}

					.el-select__caret {
						color: rgba(255, 255, 255, 0.6);
						line-height: 24px;
					}
				}
			}
		}
	}
	
	.equipments_status{
		position:absolute;
		width: 280px;
		height:25px;
		display: flex;		
		left: 420px;
		bottom:149px;
		line-height: 25px;
    	justify-content: center;
		font-size:14px;
		color:#FFFFFF;
		text-align: center;
		.label{
			width:85px;
			background: linear-gradient(180deg, rgba(123, 205, 252, 0) 0%, rgba(123, 205, 252, 0.2) 100%);
		}
		.item{
			width:56px;
			border-radius: 2px;
			margin:0 8px;
		}
		.normal{
			background: rgba(11, 206, 89, 0.3);
			border: 1px solid #0BCE59;
		}
		.unnormal{
			background: rgba(226, 17, 17, 0.3);
			border: 1px solid #E21111;
		}
		.offline{
			background: rgba(231, 168, 8, 0.3);
			border: 1px solid #E7A808;		
		}
	}	

	.time_player{
		width:565px;
	}
}
</style>
<style lang="less" scoped>
	.ylgk_panel{
		.title_text{
			background:url('../assets/image/panelTitle/ylgk.png');
		}
	}
</style>